/** 
  填写信息
 */
<template>
  <yd-layout>
    <yd-navbar slot="navbar" title="填写信息" bgcolor="#0a0a0a" color="#fff">
      <router-link to="/beautician/" slot="left">
        <yd-navbar-back-icon color="#fff"></yd-navbar-back-icon>
      </router-link>
      <span @click.stop="handleSubmit" slot="right" style="color:#fff;">保存</span>
    </yd-navbar>
    <yd-cell-group v-for="(item, i) in specials" :key="i">
      <yd-cell-item>
        <div slot="left">
          <div class="radio-title">
            {{item.name}}
          </div>
          <div class="radio-cell">
            <yd-radio-group v-if="item.type==0" v-model="item.value">
              <yd-radio v-for="(radio , j) in item.infos" :key="j" :val="radio">{{radio}}</yd-radio>
            </yd-radio-group>
            <yd-checkbox-group v-if="item.type==1" v-model="item.value">
                <yd-checkbox v-for="(radio , j) in item.infos" :key="j" :val="radio">{{radio}}</yd-checkbox>
            </yd-checkbox-group>
          </div>
        </div>
      </yd-cell-item>
      
    </yd-cell-group>
    <yd-cell-group>
      <yd-cell-item>
        <yd-textarea v-model="remarks" slot="right" placeholder="备注信息" maxlength="100"></yd-textarea>
      </yd-cell-item>
    </yd-cell-group>
  </yd-layout>
</template>
<script>
import pageMixin from "../../../../mixins/page";
export default {
  mixins: [pageMixin],
  props: {
    uid: {},
  },
  data() {
    return {
      specials: [],
      remarks: "",
    };
  },
  computed: {
    fid() {
      return this.$store.state.uid;
    },
  },
  methods: {
    async handleSubmit() {
      let params = {};
      params.uid = this.uid;
      params.fid = this.fid;
      params.remarks = this.remarks;
      params.specials = this.specials.map(item => {
        if (item.type == 0) {
          return {
            name: item.name,
            id: item.id,
            infos: [item.value],
          };
        } else if (item.type == 1) {
          return {
            name: item.name,
            id: item.id,
            infos: item.value,
          };
        }
        //`${item.name}:${item.value.join(",")};备注:${item.remark};`;
      });
      params.specials = JSON.stringify(params.specials);
      this.indicator = true;
      let res = await this.$api.fillUserRemarks(params).catch(err => {
        this.$dialog.toast({
          mes: err,
          icon: "error",
        });
      });

      if (res) {
        if (res.result) {
          this.done(res.message);
        } else {
          this.error(res.message);
        }
      }
      this.indicator = false;
    },
    done(mes) {
      this.$router.go(-1);

      this.$dialog.toast({
        mes: mes,
        icon: "success",
      });
    },
    error(err) {
      this.$dialog.toast({
        mes: err,
        icon: "error",
      });
    },
    // 初始加载用户的菜单
    loadUserRemarks() {
      this.indicator = true;
      this.$api
        .loadUserRemarks()
        .then(data => {
          this.indicator = false;
          this.specials = data.specials.map(item => {
            if (item.type == 0) {
              item.value = "";
            } else if (item.type == 1) {
              item.value = [];
            }
            item.remark = "";
            return item;
          });
        })
        .catch(errMsg => {
          this.indicator = false;
        });
    },
    init() {
      if (!this.uid) {
        this.$router.go(-1);
      }
      this.loadUserRemarks();
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss">
.radio-title {
  padding: 10px 0px;
}
.radio-cell {
  padding: 0 0 10px;
}
</style>
